<template>
  <div class="ranking">
    <div class="frameRanking">{{msg}}</div>
    <div class="box">
      <span>热门项目语言：</span><input type="text" v-model="langVal">
    </div>
    <div class="box">
      <span>时间：</span> <div class="boxdiv">
      <select name="" id="" v-model="sinceVal">
        <option value=" " selected="selected">全部</option>
        <option value="daily">每天</option>
        <option value="weekly">每周</option>
        <option value="monthly">每月</option>
      </select>
    </div>
    </div>
    <button @click="serch">查询</button>
    <div class="w1200 ran">
      排名
      <div>
        <p style="text-align: left" v-for="(data,index) in rankingData"><span style="width: 70px;">第{{index+1}}名</span><span>名称：{{data.repo}}</span><span>stars：{{data.stars}}</span><span>语言：{{data.lang}}</span><a :href="data.repo_link">github地址</a></p>
      </div>
      <div v-show="isData">正在加载中</div>
    </div>
  </div>
</template>

<script>
export default {
name: 'GithubFrameRankings',
data () {
      return {
        msg: '可查询github网站语言，框架和库的排名',
        langVal:'',
        sinceVal:'',
        rankingData:'',
        isData:false
      }
    },
    methods:{
      serch(){
        var that = this
        this.isData = true
        this.$http.githubGet('http://localhost:3000/', function (res) {
          that.isData = false
          that.rankingData = res.data.items
          console.log(that.rankingData);
        }, function (err) {
          console.log(err)
        })
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .ran{
    margin-top: 20px;
    border: 1px solid #ccc;
    p{
      margin-top: 10px;
      span{
        display: inline-block;
        width: 350px;
      }
    }

  }
  button{
    cursor: pointer;
  }
  .frameRanking{
    width: 100%;
    text-align:center;
    color: #42b983;
    margin-top: 100px;
    font-size: 20px;
  }
  .box{
    margin-bottom: 10px;
    text-align: center;
    span{
      vertical-align: top;
    }
    .boxdiv{
      width: 200px;
      display: inline-block;
      select{
        width: 140px;
        line-height: 21px;
        option{
          line-height: 21px;
        }
      }
    }
  }
</style>

